<template>
  <div class="page">
    <a-breadcrumb style="margin-bottom:12px">
      <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
      <a-breadcrumb-item>搜索</a-breadcrumb-item>
    </a-breadcrumb>

    <div class="toolbar">
      <a-input-search
        v-model:value="keyword"
        placeholder="搜索标题/摘要"
        enter-button
        @search="onSearch"
        allow-clear
      />
    </div>

    <PublicArticlesList :keyword-prop="keyword" :show-toolbar="false" />
  </div>
  
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import PublicArticlesList from './PublicArticles.vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const keyword = ref('')

onMounted(() => {
  const q = route.query.q
  keyword.value = typeof q === 'string' ? q : ''
})

watch(() => route.query.q, (q) => {
  const v = typeof q === 'string' ? q : ''
  if (v !== keyword.value) keyword.value = v
})

function onSearch() {
  router.replace({ name: 'SearchPage', query: { q: keyword.value || undefined } })
}

watch(keyword, (v) => {
  if (v === '' && route.query.q) {
    router.replace({ name: 'SearchPage', query: {} })
  }
})
</script>

<style scoped>
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
}
.toolbar { margin-bottom: 12px; }
</style>



